import React, { useEffect, useState } from 'react';
import {
  Input,
  Form,
  DatePicker,
  ConfigProvider,
  Select,
  Button,
  Divider,
  Pagination,
} from 'antd';
import styles from './index.less';
// import { KeepAlive } from 'react-keep-alive';
// import zhCN from 'ant-design-vue/es/locale/zh_CN';
import zhCN from 'antd/es/locale/zh_CN';
import dayjs from 'dayjs';
// import { connect } from 'dva';
import { history, KeepAlive } from 'umi';
// import testPicture from '../../../../assets/mainWindow/丰富的功耗测试服务.png'

import { queryTaskList } from '../../../api/gameTaskInfo';

const { Option } = Select;
const { Search } = Input;
// const { RangeRicker } = DatePicker;
// const { items } = Tabs;
const SmartPerfPage = (props) => {
  // const { dispatch } = props;
  const [form] = Form.useForm();

  const [testResultList, setTestResultList] = useState([
    // {
    //   id: 764691,
    //   subJobTypeName: '音视频测试-视频流畅性测试',
    //   deviceName: '7US0****0270(HWICHUX123)',
    //   createTimestamp: '2021-03-23 16:00:00',
    // },
    // {
    //   id: 764692,
    //   subJobTypeName: '音视频测试-视频流畅性测试',
    //   deviceName: '7US0****0270(HWICHUX123)',
    //   createTimestamp: '2021-03-23 16:00:00',
    // },
    // {
    //   id: 764693,
    //   subJobTypeName: '音视频测试-视频流畅性测试',
    //   deviceName: '7US0****0270(HWICHUX123)',
    //   createTimestamp: '2021-03-23 16:00:00',
    // },
    // {
    //   id: 764694,
    //   subJobTypeName: '音视频测试-视频流畅性测试',
    //   deviceName: '7US0****0270(HWICHUX123)',
    //   createTimestamp: '2021-03-23 16:00:00',
    // },
    // {
    //   id: 764695,
    //   subJobTypeName: '音视频测试-视频流畅性测试',
    //   deviceName: '7US0****0270(HWICHUX123)',
    //   createTimestamp: '2021-03-23 16:00:00',
    // },
    // {
    //   id: 764696,
    //   subJobTypeName: '音视频测试-视频流畅性测试',
    //   deviceName: '7US0****0270(HWICHUX123)',
    //   createTimestamp: '2021-03-23 16:00:00',
    // },
    // {
    //   id: 764697,
    //   subJobTypeName: '音视频测试-视频流畅性测试',
    //   deviceName: '7US0****0270(HWICHUX123)',
    //   createTimestamp: '2021-03-23 16:00:00',
    // },
  ]);
  // const fetchTreeList = (parmas = {}) => {
  //   dispatch({
  //     type: 'staticKpiPage/fetchTreeList',
  //     payload: parmas,
  //     callback: (res) => {
  //       const { code, date } = res;
  //       if (code === 20) {
  //       }
  //     },
  //   });
  // };

  // const fetchStaticKpiChartDate = (parmas) => {
  //   dispatch({
  //     type: 'staticKpiPage/StaticKpiChartDate',
  //     callback: (res) => {
  //       setLineCharDate(res?.date); //当前取到的是对象
  //     },
  //   });
  // };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const resp = await queryTaskList({
          projectId: '614',
        });
        console.log('任务列表' + resp);
        setTestResultList(resp.data.data.taskInfoList);
      } catch (err) {
        console.log('getHeatSourceCfg err', err);
      }
    };
    fetchData();
    //fetchTreeList();
  }, []);

  const getTaskStatus = (state) => {
    switch (state) {
      case 'finish':
        return '已完成';
      case 'running':
        return '进行中';
      case 'running':
        return '取消';
      case 'running':
        return '停止';
      case 'running':
        return '失败';
    }
  };

  const getStartTime = (time) => {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月份从0开始，需要加1
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    return (
      year +
      '-' +
      month +
      '-' +
      day +
      ' ' +
      hours +
      ':' +
      minutes +
      ':' +
      seconds
    );
  };

  const toReportPage = (id) => {
    // console.log('111');
    history.push('/gametest', { jobId: id });
    // history.push({pathname:'/gametest'}, {data:id});
    // history.push
    // ({
    //   pathnmae: '/gametest',
    //   query: {
    //     jobId: id,
    //   },
    // });
  };
  const delectReport = (id) => {
    setTestResultList((current) =>
      current.filter((testResultList) => {
        return testResultList.id !== id;
      }),
    );
  };
  const onChange = (pageNumber) => {
    console.log('Page: ', pageNumber);
  };
  const onFinish = (values) => {
    console.log('Success:', values);
    const { dateTime } = values;
    const formatter = 'YYYY-MM-DD';
    let start = dateTime ? dayjs(dateTime[0]).format(formatter) : null;
    let end = dateTime ? dayjs(dateTime[1]).format(formatter) : null;
    const param = {
      ...values,
      start,
      end,
    };
    delete param.dateTime;
    console, log(param);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const onGenderChange = (value) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'hi, man!' });
      case 'female':
        form.setFieldsValue({ note: 'hi, lady!' });
      case 'other':
        form.setFieldsValue({ note: 'hi, there!' });
        break;
      default:
    }
  };
  const configPagination = {
    total: 85,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total = 100) => `共 ${total} 条`,
    onchange: (page, size) => {
      console.log(page, size);
    },
  };
  // 选择测试状态
  const [statusList, setStatusList] = useState([
    {
      label: '全部',
      value: '全部',
    },
    {
      label: '运行中',
      value: '运行中',
    },
    {
      label: '已完成',
      value: '已完成',
    },
    {
      label: '取消',
      value: '取消',
    },
    {
      label: '停止',
      value: '停止',
    },
    {
      label: '失败',
      value: '失败',
    },
  ]);
  // 服务类型
  const [serviceTypeList, setServiceTypeList] = useState([
    {
      label: '全部',
      value: '全部',
    },
    {
      label: '游戏测试',
      value: '游戏测试',
    },
    {
      label: '音视频测试',
      value: '音视频测试',
    },
    {
      label: 'ArkUI负载模型',
      value: 'ArkUI负载模型',
    },
  ]);
  // 测试方式
  const [testTypeList, setTestTypeList] = useState([
    {
      label: '游戏',
      value: '游戏4',
    },
    {
      label: '游戏',
      value: '游戏3',
    },
    {
      label: '游戏',
      value: '游戏2',
    },
    {
      label: '游戏',
      value: '游戏1',
    },
  ]);
  return (
    <div className={styles.smartPerfContainer}>
      <KeepAlive when={true}>
        <ConfigProvider>
          <div className={styles.smartPerf_header}>
            <div className={styles.smartPerf_header_title}>
              <div className={styles.title}>图形图像测试</div>
              <div className={styles.content}>
                通过游戏测试和音频测试，给出基于图形图像的标准的测试报告
              </div>
            </div>
          </div>
          <div className={styles.formDiv}>
            <Form
              form={form}
              name="basic"
              style={{ width: '100%', display: 'flex', flexWrap: 'wrap' }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item label="测试状态" name="testStatus">
                <Select
                  placeholder="请选择"
                  onChange={onGenderChange}
                  options={statusList}
                  // defaultValue={'已完成'}
                ></Select>
              </Form.Item>

              <Form.Item label="服务类型" name="serviceType">
                <Select
                  mode="multiple"
                  placeholder="请选择"
                  onChange={onGenderChange}
                  allowClear
                  options={statusList}
                  showArrow
                  showSearch={false}
                ></Select>
              </Form.Item>
              <Form.Item label="测试方式" name="testType">
                <Select
                  mode="multiple"
                  placeholder="请选择"
                  onChange={onGenderChange}
                  allowClear
                  options={statusList}
                  showArrow
                  showSearch={false}
                ></Select>
              </Form.Item>
              <Form.Item label="时间选择" name="dateTime">
                <DatePicker />
              </Form.Item>
              <Form.Item label="用户名" name="username">
                <Input placeholder="请输入内容" />
              </Form.Item>
              <Form.Item label="机型" name="phoneType">
                <Input />
              </Form.Item>
              <Form.Item label="SN" name="phoneSN">
                <Input />
              </Form.Item>
              <Form.Item label="游戏名称" name="gameName">
                <Input />
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                  刷新
                </Button>
              </Form.Item>
            </Form>
            <div className={styles.formDiv_card}>
              {testResultList?.map((item, index) => {
                return (
                  <div key={index} className={styles.single_card}>
                    <div className={styles.card_first}>
                      <img className={styles.first_picture} alt="" />
                      <span className={styles.first_title}>
                        {item.taskName}
                      </span>
                      <div className={styles.first_status}>
                        <span className={styles.first_finshed}>
                          {getTaskStatus(item.status)}
                        </span>
                      </div>
                    </div>
                    <div className={styles.card_lable}>
                      <span className={styles.label_name}>任务ID</span>
                      <span className={styles.label_cont}>
                        {item.id + '(' + item.appName + ')'}
                      </span>
                    </div>

                    <div className={styles.card_lable}>
                      <span className={styles.label_name}>测试类型</span>
                      <span className={styles.label_cont}>
                        {item.subTaskTypeName}
                      </span>
                    </div>

                    <div className={styles.card_lable}>
                      <span className={styles.label_name}>设备型号</span>
                      <span className={styles.label_cont}>
                        {item.deviceType}
                      </span>
                    </div>

                    <div className={styles.card_lable}>
                      <span className={styles.label_name}>创建时间</span>
                      <span className={styles.label_cont}>
                        {getStartTime(item.createTime)}
                      </span>
                    </div>
                    <Divider
                      style={{ marginTop: '10px', marginBottom: '10px' }}
                    ></Divider>
                    <div className={styles.card_button}>
                      <div
                        className={styles.button_look}
                        onClick={() => toReportPage(item.id)}
                      >
                        查看报告
                      </div>
                      <div
                        className={styles.button_delect}
                        onClick={() => delectReport(item.id)}
                      >
                        删除
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div style={{ textAlign: 'end' }}>
            <Pagination
              showQuickJumper
              defaultCurrent={2}
              total={500}
              onchange={onChange}
            />
          </div>
        </ConfigProvider>
      </KeepAlive>
    </div>
  );
};

export default SmartPerfPage;

// export default connect(({ staticKpiPage }) => ({ staticKpiPage }))(
//   SmartPerfPage,
// );
